<template>
  <!-- 对数据进行截取 是当前页数-1 乘以 显示条数     当前页数乘以显示条数 -->
  <el-table
   :data="
     filterTableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)
   "
   style="width: 100%"
    >
   <el-table-column prop="date" label="Date" width="180" />
   <el-table-column prop="name" label="Name" width="180" />
   <el-table-column prop="address" label="Address" />
  <!-- 添加输入框 -->
   <el-table-column align="right">
     <template #header>
       <el-input v-model="search" size="small" placeholder="Type to search" />
     </template>
   </el-table-column>
   <!-- 添加删除和修改按钮 -->
  <el-table-column>
    <template #default="scope">
      <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
        >Edit</el-button
      >
      <el-button
        size="small"
        type="danger"
        @click="handleDelete(scope.$index, scope.row)"
        >Delete</el-button
      >
    </template>
  </el-table-column>
  <!-- 添加删除和修改按钮 -->
  </el-table>
  <el-pagination
    layout="total, sizes, prev, pager, next, jumper"
    :total="$store.state.homeview.tableData.length"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage4"
  />

  <UpdateDialog></UpdateDialog>
  </template>

  <script lang="ts" setup>
  import { ref,computed } from "vue";
  import { useStore } from "vuex";
  // 得到store对象
  const store = useStore();
  // 设置需要的参数与方法
  const currentPage4 = ref(1);
  const pageSize4 = ref(10);
  const search = ref('')
  // 使用计算属性处理数据
  const filterTableData = computed(() =>
  store.state.homeview.tableData.filter((data:any) =>
   !search.value ||
   data.name.toLowerCase().includes(search.value.toLowerCase())
  )
);
  
  // 修改下面得方法
  const handleSizeChange = (val: number) => {
  //一页显示多少条
    pageSize4.value = val;
  };
  const handleCurrentChange = (val: number) => {
  //页码更改方法
    currentPage4.value = val;
  };

  // 添加删除和修改按钮方法与接口
  interface User {
    date: string;
    name: string;
    address: string;
  }
  const handleEdit = (index: number, row: User) => {
    console.log(index, row);
    // 调用vuex修改
    store.commit("SET_DIALOG")
  };
  const handleDelete = (index: number, row: User) => {
    console.log(index, row);
  };

  //在组件的修改按钮调用函数中添加commit
  
  // const tableData = [
  // {
  //  date: "2016-05-03",
  //  name: "Tom",
  //  address: "No. 189, Grove St, Los Angeles",
  // },
  // {
  //  date: "2016-05-02",
  //  name: "Tom",
  //  address: "No. 189, Grove St, Los Angeles",
  // },
  // {
  //  date: "2016-05-04",
  //  name: "Tom",
  //  address: "No. 189, Grove St, Los Angeles",
  // },
  // {
  //  date: "2016-05-01",
  //  name: "aa",
  //  address: "No. 189, Grove St, Los Angeles",
  // },
  // {
  //  date: "2016-05-01",
  //  name: "bb",
  //  address: "No. 189, Grove St, Los Angeles",
  // },
  // {
  //  date: "2016-05-01",
  //  name: "Tom",
  //  address: "No. 189, Grove St, Los Angeles",
  // },
  // {
  //  date: "2016-05-01",
  //  name: "Tom",
  //  address: "No. 189, Grove St, Los Angeles",
  // },
  // {
  //  date: "2016-05-01",
  //  name: "Tom",
  //  address: "No. 189, Grove St, Los Angeles",
  // },
  // {
  //  date: "2016-05-01",
  //  name: "Tom",
  //  address: "No. 189, Grove St, Los Angeles",
  // },
  // {
  //  date: "2016-05-01",
  //  name: "Tom",
  //  address: "No. 189, Grove St, Los Angeles",
  // },
  // {
  //  date: "2016-05-01",
  //  name: "Tom",
  //  address: "No. 189, Grove St, Los Angeles",
  // },
  // {
  //  date: "2016-05-01",
  //  name: "Tom",
  //  address: "No. 189, Grove St, Los Angeles",
  // },
  // {
  //  date: "2016-05-01",
  //  name: "Tom",
  //  address: "No. 189, Grove St, Los Angeles",
  // },
  // {
  //  date: "2016-05-01",
  //  name: "Tom",
  //  address: "No. 189, Grove St, Los Angeles",
  // },
  // {
  //  date: "2016-05-01",
  //  name: "Tom",
  //  address: "No. 189, Grove St, Los Angeles",
  // },
  // {
  //  date: "2016-05-01",
  //  name: "Tom",
  //  address: "No. 189, Grove St, Los Angeles",
  // },
  // {
  //  date: "2016-05-01",
  //  name: "Tom",
  //  address: "No. 189, Grove St, Los Angeles",
  // },
  // {
  //  date: "2016-05-01",
  //  name: "Tom",
  //  address: "No. 189, Grove St, Los Angeles",
  // },
  // {
  //  date: "2016-05-01",
  //  name: "Tom",
  //  address: "No. 189, Grove St, Los Angeles",
  // },
  // {
  //  date: "2016-05-01",
  //  name: "Tom",
  //  address: "No. 189, Grove St, Los Angeles",
  // },
  // {
  //  date: "2016-05-01",
  //  name: "Tom",
  //  address: "No. 189, Grove St, Los Angeles",
  // },
  // {
  //  date: "2016-05-01",
  //  name: "Tom",
  //  address: "No. 189, Grove St, Los Angeles",
  // },
  // ];
</script>
  <style>
</style>